<template>
	<div class="bg">
		<goback title="发布文章"></goback>



		<div class="topContainer">
			<input type="text" placeholder="请填写文章的标题" v-model="title">
			<select v-model="domain">
			   <option  value="环保" selected>环保</option>
			   <option  value="农法">农法</option>  
			   <option  value="环保">环保</option>  
			 </select>  
			<button class="fabu" @click="submit">发布</button>
		</div>

		


		<textarea @blur="getTags" name="" id="" cols="30" rows="10" maxlength="2000" placeholder="描述一下文章的正文" v-model="content"></textarea>

		<div class="card">
			<div class="tag-text">上传图片</div>
			<div class="upload_container">
				<div class="image-container">
					<div class="card_imgs_box">
						<div class="card_img" v-for="(item, index) in imgs">
							 <img :src="item" alt="User Selected Image" />  
						</div>
					</div>
				</div>
				<div class="add-container">
					<img class="upload_img" :src="require(`@/assets/icons/加.png`)" alt="加" @click="selectFiles">
					<input @change="onFileChange" type="file" accept="image/*" multiple style="display: none" ref="fileInput" />
				</div>
			</div>
		</div>

		<div class="card">
			<div class="tag-text">文章标签</div>
			<div class="tag-container">
				
				<div class="tag-item" v-if="domain!=''">
					<div class="tag-content">
					{{domain}}
					</div>
				</div>
				
				<div v-for="(item, index) in tags" class="tag-item" :key="index">
					<div class="tag-content">
						{{ item.tag }}
						<span class="tag-delete" @click="removeTag(index)">×</span>
					</div>
				</div>

				<div class="add-tag-container">
					<img v-if="!showNewTypeInput" class="tag-icon" :src="require(`@/assets/icons/加.png`)" alt="加"
						@click="showNewTypeInput = true">
					<div class="add-tag-input" v-if="showNewTypeInput">
						<input type="text" v-model="newType">
						<button @click="addTagOnClick">添加</button>
					</div>
				</div>

			</div>
		</div>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				content: '',
				domain: '环保',
				tags: [],
				newType: '', // 用户输入的新发布类型  
				showNewTypeInput: false, // 控制输入框的显示与隐藏 ,
				imgs: [],
				file_imgs:[]
				
			}
		},
		mounted() {

		},
		methods: {
			submit(){
				
				let formData = new FormData();
				
				 formData.append('token', this.getStorage('token'));
				 formData.append('content', this.content);  
				 formData.append('domain', this.domain);  
				 formData.append('title', this.title);
				 
				 let newArr =[]
				 newArr.push(this.domain);
				 this.tags.forEach(e=>{
					 newArr.push(e.tag);
				 })
				 
				 formData.append('tags',newArr ); 
				  
				// 假设 this.imgs 是一个包含 File 或 Blob 对象的数组  
				for (let i = 0; i < this.file_imgs.length; i++) {  
				  formData.append('images', this.file_imgs[i]); // 添加文件名或索引作为第三个参数，以区分每个文件  
				}
				      this.axios.post(`${this.IP}/submit_page`, formData, {  
				        headers: {  
				          'Content-Type': 'multipart/form-data'  
				        }  
				      })  
				      .then(res => { 
						  this.$toast.showMessage(res.data);
						 
				        // 处理响应数据  
				      })
				
				
			},
			selectFiles() {
				this.$refs.fileInput.click();
			},
			onFileChange() {
				const files = event.target.files;
				if (files) {
					Array.from(files).forEach(file => {
						  this.file_imgs.push(file);  
						
						const reader = new FileReader();
						reader.onload = (e) => {
							this.imgs.push(e.target.result); // 将转换后的图片URL添加到数组中  
						};
						reader.readAsDataURL(file); // 将文件转换为DataURL  
					});
				}
			},
			removeTag(index) {
				this.types.splice(index, 1);
			},
			addTagOnClick() {
				this.addTag();
			},
			getTags(){
				if(this.title.trim() !='' && this.content.trim() != ''){
					this.axios.post(`${this.IP}/get_page_tags`, {
						title: this.title,
						content: this.content
					}).then(res => {
						console.log(res.data.items);
						this.tags=res.data.items;
					}).catch(error => {
						// 处理错误  
						console.error('请求出错：', error);
					});;
				}
				
			},
			addTag() {
				if (this.newType.trim()) { // 去除前后空格并检查是否为空  
					this.types.push(this.newType); // 将新类型添加到数组  
					this.newType = ''; // 清空输入框  
				}
				this.showNewTypeInput = false; // 隐藏输入框  
			},
		}
	}
</script>

<style scoped>
	select{
		border-radius:10px;
		margin:1vw;
		box-sizing: border-box;
	}
	.card_imgs_box{
		width:80vw;
		overflow-x: scroll;
	}
	.upload_container{
		display:flex;
		flex-direction: column;
	}
	.add-container{
		align-self: flex-end;
		margin-right:3vw;
	}
	.card_imgs_box{
		display: flex;
		flex-direction: row;
		justify-content:flex-start;
		align-items: center;
	}
	
	.card_img img{
		width:180px;
		height:180px;
		border-radius:10px;
		margin:10px;
	}
	input {
		border: none;
		border-radius: 10px;
		height: 10vw;
		padding-left: 2vw;
	}

	textarea {
		width: 90%;
		height: 80vw;
		border: none;
		border-radius: 10px;
		margin: 0 auto;
		padding-top: 3vw;
		padding-left: 2vw;
		margin-top: 1vw;
		margin-left: 3vw;
	}




	.topContainer {
		width: 100vw;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		padding: 3vw;
		box-sizing: border-box;
	}

	.topContainer input {
		width: 80vw;
	}

	.fabu {
		background: linear-gradient(to right, #ffcf0e, #ff8002);
		border-radius: 2vw;
		color: white;
		min-width: 96px;
	}

	.tag-text {
		margin-left: 3vw;
		font-size: 28px;
		border-bottom: 1px solid #ffcf0e;
	}

	.tag-container {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-top: 3vw;
		margin-bottom: 3vw;
		padding: 3vw;
	}

	.tag-item {
		display: flex;
		align-items: center;
		margin-right: 5vw;
		/* 标签之间的间距 */
		margin-bottom: 3vw;
		/* 标签之间的垂直间距 */
		flex-shrink: 0;
		/* 防止标签在容器缩小时变形 */
		max-width: calc(25% - 10px);
		/* 每行四个标签，减去间距 */
	}

	.tag-content {
		position: relative;
		border: 1px solid #ff8002;
		border-radius: 10px;
		padding: 5px 10px;
		display: inline-block;
		background-color: #fff;
		/* 背景色，根据需要设置 */
	}

	.tag-delete {
		position: absolute;
		top: -2vw;
		right: -2vw;
		cursor: pointer;
		font-size: 24px;
		color: #b4b4b4;
		border-radius: 50%;
		width: 16px;
		height: 16px;
		line-height: 16px;
		text-align: center;
		opacity: 1;
		transition: opacity 0.3s ease;

	}

	.tag-icon {
		width: 5vw;
		height: 5vw;
		cursor: pointer;
	}

	.add-tag-container {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.add-tag-input {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-top: 10px;
		margin-left: 0vw;
	}

	.add-tag-input input[type="text"] {

		padding: 2vw;

		height: 60%;
		border: 1px solid #ccc;
		border-radius: 10px;
		margin-right: 10px;
	}

	.add-tag-input button {
		/* 按钮样式 */
		background-color: #fff;
		cursor: pointer;
		background: linear-gradient(to right, #ffcf0e, #ff8002);
		border-radius: 2vw;
		color: white;
		border: none;
		padding: 1vw;
	}

	.domain {
		margin: 4vw;
	}

	.upload_img {

		width: 48px;
	}

	.image-container {
		width: 90vw;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin: 3vw;
	}
</style>